<template>
  <div class="Training-results-panel">
    <div class="results-panel-Breadcrumb">
      <img src="@/assets/img/other/icon-任务动态.png" />
      <div class="results-panel-route">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path:item.path}" v-for="(item,index) in State.Breadcrumbs.Breadcrumb" :key="index"
            >{{item.pathname}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <ResultDetails v-if="State.StatePanel===1" :ResultDetails="State.ResultDetails" ></ResultDetails>
  </div>
</template>

<script>
import bus from "@/bus";
import { defineComponent, reactive, toRef, toRefs } from "vue";
export default defineComponent({
  name: "Breadcrumb",
  components: {},
  setup() {
    let State=reactive({
        Breadcrumbs:{},
    })
    bus.$off('Breadcrumbs')
    bus.$on('Breadcrumbs', (data) => {
      State.Breadcrumbs=data
    })
    return {
      State
    };
  },
});
</script>
<style lang="less">
.Training-results-panel {
  position: absolute;
  width: 1720px;
  height: calc(100% - 10%);
  left: 160px;
  top: 100px;
  background: #ffffff;
  border-radius: 16px;
}
.Training-results-panel img {
  position: absolute;
  width: 24px;
  height: 24px;
  max-width: 100%;
  max-height: 100%;
  left: 22px;
  top: 21px;
}
.results-panel-route {
  position: absolute;
  left: 55px;
  top: 25px;
  z-index: 1;
}
.Training-results-panel .results-button {
  position: absolute;
  left: 1600px;
  top: 20px;
  width:130px;
  height:30px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background : url("../assets/img/other/icon-返回-normal.png") 45px 0px;
  background-repeat:no-repeat;
	background-size:21%;
	-moz-background-size:21%;
  color: #81859c;
  cursor: pointer;
  z-index: 1;
}
.Training-results-panel .results-span-exit{
  margin-left: -90px;
  margin-bottom: 5px;
}
.Training-results-panel .results-button:hover{
  color: #0974d8;
  width:130px;
  height:30px;
  background : url("../assets/img/other/icon-返回-hover.png") 45px 0px;
  background-repeat:no-repeat;
	background-size:21%;
	-moz-background-size:21%;
}
</style>
